<template>
  <div class="main">
    <div class="outerDiv">
      <!-- <goBack :white="true" aa="./planList" :hasTitle="true" topTitle="历史规划报告"></goBack> -->
        <headerBack>
        <b slot="my-center" style="font-weight:600">历史规划报告</b>
      </headerBack>
      <scroller lock-x>
        <div style="margin-top: 0.8rem;">
          <div class="historyList">
            <div v-for="(item, index) of historyRecordList" :key="index" class="reportItem">
              <div class="topArea">
                <div class="line_1">
                  <div class="report" @click="handleIntoResult(item.id)">
                    <div class="name">{{ item.grade + item.semester }} 规划报告</div>
 
                    <i class="moreIcon"></i>
                  </div>
                  <div class="deleteIcon" @click.stop="handleRemoveHistoryRecord(item.id)">
                    <i class="bg-com_icon_delete"></i>
                  </div>
                </div>
                <div class="line_2">
                  <div class="createTime">第 {{ historyRecordList.length - index }} 次生成</div>
                  <div class="date">{{ (new Date(item.createTime)).format('yyyy-MM-dd hh:mm') }}</div>
                </div>
              </div>
              <div class="bottomArea">
                <div class="college">
                  <div class="name">{{ item.academyName }}</div>
                  <div class="learningGap">成绩差距<span>{{ item.difference }}分</span></div>
                </div>
                <div class="major">{{ item.major }}</div>
              </div>
            </div>
          </div>
          <div style="width: 100%; height: 2rem;"></div>
        </div>
      </scroller>
    </div>
  </div>  
</template>

<script>
import ls from "store2";

import { getReportHistory, removeReport } from "~/api/colleges";
import headerBack from "~/components/headerBack";
import { format } from '~/plugins/filter';
export default {
  components: {
    headerBack
  },
  data() {
    return {
      historyRecordList: []
    }
  },
  mounted() {
    ls.remove('isHistory')
    this.$visit(this.$route.path)
    this.getHistoryRecordList()
  },
  methods: {
    // 获取历史记录集合
    getHistoryRecordList() {
      this.$loading('open')
      getReportHistory({ userType: ls.get('userType') }).then(res => {
        this.historyRecordList = res.data.filter(x => x.generate == 1)
      }).finally(() => {
        this.$hideLoading()
      })
    },
    goto(routerName, queryData) {
      this.$router.push({
        path: routerName,
        query: {
          type: queryData
        }
      });
    },
    handleIntoResult(id) {
      ls.set('isHistory', true)
      this.goto('./result', id)
    },
    handleRemoveHistoryRecord(id) {
      this.$loading('open')
     removeReport({ id }).then(res => {
        this.getHistoryRecordList()
      }).finally(() => {
        this.$hideLoading()
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .outerDiv {
    width: 100%;
    height: 100vh;
    background: #fff;
    .historyList {
      padding: 0.34rem 0.31rem 0 0.32rem;
      .reportItem {
        width: 6.87rem;
        height: 3.11rem;
        margin-bottom: 0.32rem;
        box-sizing: border-box;
        border: 1px solid #E5E8ED;
        border-radius: 0.1rem;
        padding: 0.32rem;
        .topArea {
          padding-bottom: 0.2rem;
          border-bottom: 1px solid #E5E8ED;
          margin-bottom: 0.2rem; 
          .line_1 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.24rem;
            .report {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              .name {
                color: #222;
                font-size: 0.3rem;
                line-height: 0.42rem;
                font-weight: bold;
                margin-right: 0.16rem;
              }
              .moreIcon {
                // width: 0.32rem;
                // height: 0.32rem;
                  display: inline-block;
                width: 0.4rem;
                height: 0.4rem;
                background: url('~@/static/sprite/icon_sprites_40.png') -0.1rem -1.3rem;
                background-size:3rem 2.4rem;
              }
            }
            .deleteIcon {
              width: 0.4rem;
              height: 0.4rem;
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
          .line_2 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .createTime {
              background: #FAFAFA;
              width: 1.9rem;
              height: 0.5rem;
              line-height: 0.5rem;
              border-radius: 0.25rem;
              color: #C7C7C7;
              font-size: 0.24rem;
              font-weight: bold;
              text-align: center;
            }
          }
        }
        .bottomArea {
          .college {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .name {
              color: #222;
              font-size: 0.26rem;
              font-weight: bold;
            }
            .learningGap {
              color: #222;
              font-size: 0.26rem;
              span {
                margin-left: 0.16rem;
              }
            }
          }
          .major {
            color: #999;
            font-size: 0.26rem;
          }
        }
      }
    }
  }
</style>
